<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试页面</title>
	<link rel="stylesheet" type="text/css" href="./css/reset.css">
	<link rel="stylesheet" type="text/css" href="./css/style.css">
	<script type="text/javascript" src="./js/jquery.js"></script>
</head>
<body>
	<div class="scroll-demo">
		<!-- 标签切换 -->
		<ul class="scroll-tab clearfix">
			<li class="tab-item tab-active">第一篇</li>
			<li class="tab-item">第二篇</li>
			<li class="tab-item">第三篇</li>
			<li class="tab-item">第四篇</li>
		</ul>
		<!-- 内容展示 -->
		<div class="scroll-wrap">
			<!-- 滚动内容 -->
			<div class="scroll-cont">
				<h3 class="anchor">春</h3>
				<div class="scroll-ol">
					<p>hahaha</p>
					<p>hahaha</p>
					<p>hahaha</p>
					<p>hahaha</p>
					<p>hahaha</p>
					<p>hahaha</p>
					<p>hahaha</p>
					<p>hahaha</p>
				</div>
				<h3 class="anchor">夏</h3>
				<div class="scroll-ol">
					<p>嘿嘿嘿额黑恶</p>
					<p>嘿嘿嘿额黑恶</p>
					<p>嘿嘿嘿额黑恶</p>
					<p>嘿嘿嘿额黑恶</p>
					<p>嘿嘿嘿额黑恶</p>
					<p>嘿嘿嘿额黑恶</p>
					<p>嘿嘿嘿额黑恶</p>
				</div>
				<h3 class="anchor">秋</h3>
				<div class="scroll-ol">
					<p>6666666</p>
					<p>6666666</p>
					<p>6666666</p>
					<p>6666666</p>
					<p>6666666</p>
					<p>6666666</p>
					<p>6666666</p>
					<p>6666666</p>
				</div>
				<h3 class="anchor">冬</h3>
				<div class="scroll-ol">
					<p>爱上的咖啡就暗示的开发及案件</p>
					<p>爱上的咖啡就暗示的开发及案件</p>
					<p>爱上的咖啡就暗示的开发及案件</p>
					<p>爱上的咖啡就暗示的开发及案件</p>
					<p>爱上的咖啡就暗示的开发及案件</p>
					<p>爱上的咖啡就暗示的开发及案件</p>
					<p>爱上的咖啡就暗示的开发及案件</p>
					<p>爱上的咖啡就暗示的开发及案件</p>
				</div>
			</div>
			<!-- 滚动条 -->
			<div class="scroll-bar">
				<!-- 滚动滑块 -->
				<div class="scroll-slider"></div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="./js/scroll-bar.js"></script>
</body>
</html>